<template>
    <el-container>
        <el-main>
            <el-form ref="sysMenuForm" :model="form" :rules="rules" label-width="80px">
                <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
                    <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">基本信息</span>
                </div>
                <el-form-item label="分类名称" prop="name">
                    <el-col :span="12">
                        <el-input v-model="form.name" />
                    </el-col>
                </el-form-item>
                <el-form-item label="排序">
                    <el-col :span="12">
                        <el-input v-model="form.orders" />
                    </el-col>
                </el-form-item>
                <el-form-item label="上级分类">
                    <el-col :span="12">
                        <el-input v-model="menuName" suffix-icon="el-icon-search" @focus="dialogShow" />
                    </el-col>
                </el-form-item>

                <!-- <el-form-item label="权限标识" prop="permission">
        <el-col :span="12">
          <el-input v-model="form.permission"/>
        </el-col>
      </el-form-item>

      <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">详细信息</span>
      </div>
      <el-form-item  label="图标" prop="icon">
        <el-col :span="12">
          <el-input v-model="form.icon"/>
        </el-col>
      </el-form-item>
      <el-form-item label="链接" prop="url">
        <el-col :span="12">
          <el-input v-model="form.url"/>
        </el-col>
      </el-form-item> -->

                <el-form-item>
                    <el-button type="primary" :loading="clicked" @click="updateSysMenu('sysMenuForm')">&nbsp&nbsp完 成&nbsp&nbsp</el-button>
                </el-form-item>
            </el-form>
            <menu-dialog ref="menuDialog" @confirm="dialogConfirm" />
        </el-main>
    </el-container>
</template>
<style scoped>
.menu-wrapper {
    margin: 15px;
}
</style>
<script>
import { EventBus } from "@/api/eventBus";
import utils from "../../utils/utils.js";
import menuDialog from "./components/MenuDialog";
import { find, update } from "@/api/supplierCategory";
export default {
    name: "supplierCategory-edit",
    filters: {},
    components: {
        menuDialog,
    },
    data() {
        return {
            id: "",
            clicked: false, // 按钮防双击
            menuName: "",
            form: {
                id: "",
                name: "",
                parentId: "",
                //url:'',
                // menuType:'',
                //icon:'',
                // permission:''
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入菜单名称",
                        trigger: "blur",
                    },
                    {
                        min: 2,
                        max: 20,
                        message: "长度在 2 到 20 个字符",
                        trigger: "blur",
                    },
                ],
                menuType: [
                    { required: true, message: "请选择类型", trigger: "blur" },
                ],
                permission: [
                    {
                        required: true,
                        message: "请输入权限标识",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    watch: {
        // 路由地址不变的情况下,如果id变化则重新获取数据
        $route(newVal, oldVal) {
            console.log(newVal);
            if (
                newVal.name == "supplierCategory-edit" &&
                newVal.query.id != this.id
            ) {
                this.getData();
            }
        },
    },
    created() {
        const _this = this;
        console.log(this.$route.query.id);
        this.getData();
    },
    methods: {
        getData() {
            this.id = this.$route.query.id;
            const _this = this;
            find(this.id)
                .then((response) => {
                    console.log(response);
                    let sysMenu = response.data;
                    _this.menuName = sysMenu.menuName;
                    _this.form.parentId = sysMenu.parentId;
                    _this.form.name = sysMenu.name;
                    _this.form.id = sysMenu.id;
                    _this.form.orders = sysMenu.orders;
                    // _this.form.url = sysMenu.url
                    // _this.form.icon = sysMenu.icon
                    // _this.form.permission = sysMenu.permission
                    // _this.form.menuType = sysMenu.menuType
                })
                .catch((error) => {});
        },
        dialogShow() {
            this.$refs.menuDialog.show(this.form.id);
        },
        dialogConfirm(val) {
            this.form.parentId = val.id;
            this.menuName = val.name;
        },
        updateSysMenu(form) {
            const _this = this;
            this.$refs[form].validate((valid) => {
                if (valid) {
                    // 校验表单
                    _this.clicked = true;
                    update(_this.form)
                        .then((response) => {
                            console.log(response);
                            _this.clicked = false;
                            EventBus.$emit(
                                "supplierCategory-edit",
                                response.data
                            );
                            _this.$store
                                .dispatch("tagsView/delView", _this.$route)
                                .then(({ visitedViews }) => {
                                    _this.$router.push({
                                        path: "/supplierCategory/list",
                                    });
                                }); // 关闭当前tab回到列表
                        })
                        .catch((error) => {
                            _this.clicked = false;
                        });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
    },
};
</script>
